<template>
    <!-- 组件的结构 -->
    <div class="app">
        <h1>{{msg}},姓名是：{{studentName}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现，子给父传递数据 -->
       <School :getSchoolName="getSchoolName"></School>
       <hr>
       <!-- 通过父组件给子组件绑定一个自定义事件实现，子给父传递数据 (第一种写法使用@或v-on)-->
       <Student v-on:heima="getStudentName" @demo="test" @click.native="show"></Student>

       <!-- 通过父组件给子组件绑定一个自定义事件实现，子给父传递数据 (第二种写法使用ref)-->
       <!-- <Student ref="student"></Student> -->
    </div> 
</template>

<script>
    //组件交互相关的代码(数据、方法等)
    //引入组件
    import School from './components/School-test.vue'
    import Student from './components/Student-test.vue'
    export default{
            name:'App',
            components:{
                School,
                Student
            },
            data(){
                return{
                    msg:'欢迎学习Vue！！！',
                    studentName:''
                }
            },
            methods:{
                getSchoolName(name){
                    console.log(name);
                },
                getStudentName(name,...params){
                    console.log(name,params);
                    this.studentName=name
                },
                test(){
                    console.log('demo事件被触发了');
                },
                show(){
                    alert(123)
                }
            },
            mounted(){
                // this.$refs.student.$on('heima',this.getStudentName)
            }
            }
</script>

<style>
    .app{
        background-color: pink;
    }
</style>